<template>
  <demoBlock title="自定义列排序" padding>
    <vcu-datetime-picker
      v-model="currentDate"
      type="date"
      title="选择年月日"
      :columns-order="['month', 'day', 'year']"
      :min-date="minDate"
      :max-date="maxDate"
      :formatter="formatter"
    />
  </demoBlock>
</template>


<script>
import { defineComponent, ref } from "vue";

export default defineComponent({
  setup() {
    const currentDate = ref(new Date(2021, 1, 17));
     const formatter = (type, val) => {
      if (type === 'year') {
        return val + '年';
      }
      if (type === 'month') {
        return val + '月';
      }
      if (type === 'day') {
        return val + '日';
      }
      return val;
    };
    return {
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate,
      formatter
    };
  },
});
</script>